<template>
  <div class="tech-blue-container">
    <div class="map-header">
      <h2 class="map-title">车辆实时监控系统</h2>
      <div class="map-controls">
        <button 
          v-for="style in getAvailableMapStyles()" 
          :key="style"
          :class="['style-btn', { active: mapStyle === style }]"
          @click="changeMapStyle(style)"
        >
          {{ style }}
        </button>
      </div>
    </div>
    
    <!-- 添加科技感loading -->
    <div v-if="loading" class="tech-loading">
      <div class="loading-content">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载地图...</div>
      </div>
    </div>
    
    <div id="map" class="tech-map" :class="{ 'map-hidden': loading }"></div>
  </div>
</template>

<script>
export default {
  name: 'TodoMap',
  data() {
    return {
      routeInfo: [
        { "line": 8, "carID": "苏A12345", "lng": 116.494194, "lat": 39.860557, "speed": 30 },
        { "line": 8, "carID": "苏A12345", "lng": 116.495077, "lat": 39.862905, "speed": 50 },
        { "line": 8, "carID": "苏A12345", "lng": 116.499261, "lat": 39.864356, "speed": 60 },
        { "line": 8, "carID": "苏A12345", "lng": 116.499237, "lat": 39.868669, "speed": 80 },
        { "line": 8, "carID": "苏A12345", "lng": 116.503616, "lat": 39.869087, "speed": 65 },
        { "line": 8, "carID": "苏A12345", "lng": 116.474086, "lat": 39.870166, "speed": 58 },
        { "line": 8, "carID": "苏A12345", "lng": 116.468884, "lat": 39.870064, "speed": 65 },
        { "line": 8, "carID": "苏A12345", "lng": 116.462335, "lat": 39.870078, "speed": 30 },
        { "line": 8, "carID": "苏A12345", "lng": 116.461624, "lat": 39.872833, "speed": 52 },
        { "line": 8, "carID": "苏A12345", "lng": 116.461627, "lat": 39.877947, "speed": 45 },
        { "line": 8, "carID": "苏A12345", "lng": 116.461632, "lat": 39.881769, "speed": 35 },
        { "line": 8, "carID": "苏A12345", "lng": 116.457642, "lat": 39.883115, "speed": 62 },
        { "line": 8, "carID": "苏A12345", "lng": 116.447154, "lat": 39.883221, "speed": 64 },
        { "line": 8, "carID": "苏A12345", "lng": 116.443365, "lat": 39.883269, "speed": 65 },
        { "line": 8, "carID": "苏A12345", "lng": 116.432155, "lat": 39.880002, "speed": 85 },
        { "line": 8, "carID": "苏A12345", "lng": 116.42942, "lat": 39.879921, "speed": 65 },
        { "line": 8, "carID": "苏A12345", "lng": 116.425232, "lat": 39.883192, "speed": 75 },
        { "line": 8, "carID": "苏A12345", "lng": 116.424798, "lat": 39.887426, "speed": 54 },
        { "line": 8, "carID": "苏A12345", "lng": 116.422654, "lat": 39.890287, "speed": 56 },
        { "line": 8, "carID": "苏A12345", "lng": 116.424754, "lat": 39.892178, "speed": 57 },
        { "line": 8, "carID": "苏A12345", "lng": 116.427618, "lat": 39.892229, "speed": 79 },
        { "line": 8, "carID": "苏A12345", "lng": 116.433014, "lat": 39.895262, "speed": 35 },
        { "line": 8, "carID": "苏A12345", "lng": 116.428498, "lat": 39.896307, "speed": 37 },
        { "line": 8, "carID": "苏A12345", "lng": 116.423869, "lat": 39.896099, "speed": 47 },
        { "line": 8, "carID": "苏A12345", "lng": 116.414179, "lat": 39.895848, "speed": 68 },
        { "line": 8, "carID": "苏A12345", "lng": 116.408911, "lat": 39.899697, "speed": 64 },
        { "line": 8, "carID": "苏A12345", "lng": 116.398841, "lat": 39.899396, "speed": 63 },
        { "line": 8, "carID": "苏A12345", "lng": 116.395979, "lat": 39.89924, "speed": 55 },
        { "line": 8, "carID": "苏A12345", "lng": 116.390074, "lat": 39.898063, "speed": 66 }
      ],
      // 检修人员数据
      maintenanceWorkers: [
        { 
          id: 1, 
          name: "张三", 
          lng: 116.494194, 
          lat: 39.860557, 
          online: true
        },
        { 
          id: 2, 
          name: "李四", 
          lng: 116.480000, 
          lat: 39.870000, 
          online: true
        },
        { 
          id: 3, 
          name: "王五", 
          lng: 116.470000, 
          lat: 39.880000, 
          online: false
        },
        { 
          id: 4, 
          name: "赵六", 
          lng: 116.460000, 
          lat: 39.890000, 
          online: true
        }
      ],
      map: null,
      carMarker: null,
      workerMarkers: [], // 检修人员标记数组
      workerWindows: [], // 检修人员信息窗口数组
      carWindow: null,
      passedPolyline: null,
      connectionLines: [], // 连接线数组
      currentIndex: 0,
      timer: null,
      passedPath: [],
      mapZoom: 13,
      loading: true, // 添加loading状态
      // 地图样式配置
      mapStyle: 'light', // 当前地图样式
      mapStyles: {
        normal: 'normal',           // 标准地图
        dark: 'dark',               // 暗色地图
        light: 'light',             // 浅色地图
        whitemap: 'whitemap',       // 白色地图
        grayscale: 'grayscale',     // 灰度地图
        fresh: 'fresh',             // 清新地图
        techblue: 'amap://styles/whitesmoke' // 使用高德地图的whitesmoke样式作为基础
      },
      // 终点坐标
      destination: {
        lng: 116.390074,
        lat: 39.898063
      }
    }
  },
  mounted() {
    // 延迟初始化地图，确保DOM完全加载
    this.$nextTick(() => {
      setTimeout(() => {
        this.initMap();
        this.startSimulation();
        this.initWorkerMarkers(); // 初始化检修人员标记
        this.createConnectionLines(); // 创建连接线
      }, 100);
    });
  },
  methods: {
    initMap() {
      // 确保地图容器已存在
      if (!document.getElementById('map')) {
        console.error('地图容器未找到');
        return;
      }

      // 1. 创建地图，设置中心点为终点位置
      this.map = new AMap.Map("map", {
        zoom: this.mapZoom,
        center: [this.destination.lng, this.destination.lat],
        view: new AMap.View2D({}),
        lang: "zh_cn",
        mapStyle: this.mapStyles[this.mapStyle] // 应用科技蓝地图样式
      });

      // 地图加载完成事件
      this.map.on('complete', () => {
        this.loading = false;
      });

      // 如果地图已经加载完成，直接隐藏loading
      if (this.map.readyState && this.map.readyState === 'complete') {
        this.loading = false;
      }

      // 2.创建终点标记
      this.createDestinationMarker();

      // 3.创建小汽车marker
      this.carMarker = new AMap.Marker({
        map: this.map,
        position: [this.routeInfo[0].lng, this.routeInfo[0].lat],
        icon: new AMap.Icon({
          size: new AMap.Size(36, 36),
          image: "",
          imageSize: new AMap.Size(36, 36)
        }),
        offset: new AMap.Pixel(-18, -18),
        autoRotation: true
      });

      // 4.创建信息展示框
      this.carWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(6, -25),
        content: ""
      });

      // 5.创建已行驶轨迹线
      this.passedPath.push([this.routeInfo[0].lng, this.routeInfo[0].lat]);
      this.passedPolyline = new AMap.Polyline({
        map: this.map,
        path: this.passedPath,
        strokeColor: "#007BFF", // 科技蓝
        strokeOpacity: 0.8,
        strokeWeight: 6,
        strokeStyle: "solid",
        isOutline: true,
        outlineColor: "#ffffff",
        borderWeight: 1
      });

      // 6.打开信息框并保持显示
      this.updateInfoWindow();
      this.carWindow.open(this.map, this.carMarker.getPosition());
      
      // 监听地图移动事件，确保车辆信息窗口始终显示在正确位置
      this.carMarker.on('moving', () => {
        this.carWindow.setPosition(this.carMarker.getPosition());
      });
      
      // 监听信息窗口关闭事件
      this.carWindow.on('close', () => {
        // 信息窗口关闭时的处理
      });
      
      // 绑定车辆标记点击事件，确保点击时显示信息窗口
      this.carMarker.on('click', () => {
        this.updateInfoWindow();
        this.carWindow.open(this.map, this.carMarker.getPosition());
      });
    },

    // 创建终点标记
    createDestinationMarker() {
      const destinationMarker = new AMap.Marker({
        map: this.map,
        position: [this.destination.lng, this.destination.lat],
        icon: new AMap.Icon({
          size: new AMap.Size(32, 32),
          image: "",
          imageSize: new AMap.Size(32, 32)
        }),
        offset: new AMap.Pixel(-16, -16),
        title: "终点"
      });

      // 创建终点信息窗口
      const destinationWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
        content: '<div class="destination-info">终点</div>'
      });

      // 绑定点击事件
      destinationMarker.on('click', () => {
        destinationWindow.open(this.map, destinationMarker.getPosition());
      });
    },

    // 创建连接线
    createConnectionLines() {
      // 清除之前的连接线
      this.connectionLines.forEach(line => line.setMap(null));
      this.connectionLines = [];

      // 为车辆创建连接线
      const carLine = new AMap.Polyline({
        map: this.map,
        path: [
          [this.routeInfo[this.currentIndex].lng, this.routeInfo[this.currentIndex].lat],
          [this.destination.lng, this.destination.lat]
        ],
        strokeColor: "#007BFF",
        strokeOpacity: 0.6,
        strokeWeight: 2,
        strokeStyle: "dashed"
      });
      this.connectionLines.push(carLine);

      // 为每个检修人员创建连接线
      this.maintenanceWorkers.forEach(worker => {
        const line = new AMap.Polyline({
          map: this.map,
          path: [
            [worker.lng, worker.lat],
            [this.destination.lng, this.destination.lat]
          ],
          strokeColor: worker.online ? "#00FF00" : "#FF0000",
          strokeOpacity: 0.6,
          strokeWeight: 2,
          strokeStyle: "dashed"
        });
        this.connectionLines.push(line);
      });
    },

    // 更新连接线
    updateConnectionLines() {
      // 更新车辆连接线
      if (this.connectionLines.length > 0) {
        this.connectionLines[0].setPath([
          [this.routeInfo[this.currentIndex].lng, this.routeInfo[this.currentIndex].lat],
          [this.destination.lng, this.destination.lat]
        ]);
      }

      // 更新检修人员连接线
      this.maintenanceWorkers.forEach((worker, index) => {
        if (this.connectionLines[index + 1]) {
          this.connectionLines[index + 1].setPath([
            [worker.lng, worker.lat],
            [this.destination.lng, this.destination.lat]
          ]);
          // 更新颜色根据在线状态
          this.connectionLines[index + 1].setOptions({
            strokeColor: worker.online ? "#00FF00" : "#FF0000"
          });
        }
      });
    },

    // 初始化检修人员标记
    initWorkerMarkers() {
      this.maintenanceWorkers.forEach((worker, index) => {
        // 创建检修人员标记，使用科技蓝人形图标
        const marker = new AMap.Marker({
          map: this.map,
          position: [worker.lng, worker.lat],
          icon: new AMap.Icon({
            size: new AMap.Size(32, 32),
            image: worker.online 
              ? "" 
              : "",
            imageSize: new AMap.Size(32, 32)
          }),
          offset: new AMap.Pixel(-16, -32),
          title: worker.name
        });

        // 创建信息窗口
        const infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30),
          content: this.getWorkerInfoContent(worker)
        });

        // 绑定点击事件
        marker.on('click', () => {
          infoWindow.open(this.map, marker.getPosition());
        });

        // 存储引用
        this.workerMarkers.push(marker);
        this.workerWindows.push(infoWindow);
      });
    },

    // 获取检修人员信息窗口内容（优化版）
    getWorkerInfoContent(worker) {
      const statusText = worker.online ? '在线' : '离线';
      const statusClass = worker.online ? 'online' : 'offline';
      
      return `
        <div class="tech-worker-info-container">
          <div class="tech-worker-info-header">
            <div class="worker-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="7" r="4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="worker-name">${worker.name}</div>
          </div>
          <div class="tech-worker-info-body">
            <div class="worker-status ${statusClass}">
              <div class="status-indicator"></div>
              <span>${statusText}</span>
            </div>
            <div class="worker-details">
              <div class="detail-item">
                <div class="detail-label">经度</div>
                <div class="detail-value">${worker.lng.toFixed(6)}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">纬度</div>
                <div class="detail-value">${worker.lat.toFixed(6)}</div>
              </div>
            </div>
          </div>
        </div>
      `;
    },

    // 更新检修人员位置（模拟实时更新）
    updateWorkerPositions() {
      this.maintenanceWorkers.forEach((worker, index) => {
        // 模拟位置更新（实际应用中应从服务器获取实时位置）
        if (worker.online) {
          // 只更新在线人员位置
          const newLng = worker.lng + (Math.random() - 0.5) * 0.01;
          const newLat = worker.lat + (Math.random() - 0.5) * 0.01;
          
          // 更新数据
          worker.lng = newLng;
          worker.lat = newLat;
          
          // 更新标记位置
          if (this.workerMarkers[index]) {
            this.workerMarkers[index].setPosition([newLng, newLat]);
            
            // 如果在线状态改变，更新图标
            const currentIcon = this.workerMarkers[index].getIcon();
            if (currentIcon && currentIcon.image) {
              const shouldUseOnlineIcon = worker.online;
              const isUsingOnlineIcon = currentIcon.image.includes("0277bd");
              
              if (shouldUseOnlineIcon !== isUsingOnlineIcon) {
                this.workerMarkers[index].setIcon(new AMap.Icon({
                  size: new AMap.Size(32, 32),
                  image: worker.online 
                    ? "" 
                    : "",
                  imageSize: new AMap.Size(32, 32)
                }));
              }
            }
          }
          
          // 更新信息窗口内容
          if (this.workerWindows[index]) {
            this.workerWindows[index].setContent(this.getWorkerInfoContent(worker));
          }
        }
      });
    },

    startSimulation() {
      // 每2秒更新一次车辆位置和检修人员位置
      this.timer = setInterval(() => {
        this.moveToNextPoint();
        this.updateWorkerPositions(); // 更新检修人员位置
        this.updateConnectionLines(); // 更新连接线
      }, 2000);
    },

    moveToNextPoint() {
      // 增加索引
      this.currentIndex++;
      
      // 如果已经到达最后一个点，则停止定时器
      if (this.currentIndex >= this.routeInfo.length) {
        clearInterval(this.timer);
        return;
      }

      const currentPoint = this.routeInfo[this.currentIndex];
      const position = [currentPoint.lng, currentPoint.lat];

      // 更新车辆标记位置
      this.carMarker.setPosition(position);

      // 更新已行驶轨迹
      this.passedPath.push(position);
      this.passedPolyline.setPath(this.passedPath);

      // 更新信息窗口内容和位置
      this.updateInfoWindow();
      this.carWindow.setPosition(position); // 确保信息窗口跟随车辆移动

      // 不再设置地图中心为车辆位置
      // this.map.setCenter(position);
    },

    updateInfoWindow() {
      const currentPoint = this.routeInfo[this.currentIndex];
      const content = `
        <div class="tech-car-info-container">
          <div class="tech-car-info-header">
            <div class="header-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 5L19 12L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="header-text">${currentPoint.carID}</div>
          </div>
          <div class="tech-car-info-body">
            <div class="info-grid">
              <div class="info-item">
                <div class="info-label">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="#4fc3f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  线路
                </div>
                <div class="info-value">${currentPoint.line}</div>
              </div>
              <div class="info-item">
                <div class="info-label">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="#4fc3f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  经度
                </div>
                <div class="info-value">${currentPoint.lng.toFixed(6)}</div>
              </div>
              <div class="info-item">
                <div class="info-label">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="#4fc3f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  纬度
                </div>
                <div class="info-value">${currentPoint.lat.toFixed(6)}</div>
              </div>
              <div class="info-item">
                <div class="info-label">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M5.5 5.5L18.5 18.5M18.5 5.5L5.5 18.5" stroke="#4fc3f7" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                  速度
                </div>
                <div class="info-value speed-value">${currentPoint.speed.toFixed(2)} <span class="unit">KM/h</span></div>
              </div>
            </div>
            <div class="tech-progress-bar">
              <div class="progress-label">行驶状态</div>
              <div class="progress-track">
                <div class="progress-fill" style="width: ${Math.min(100, currentPoint.speed)}%"></div>
              </div>
            </div>
          </div>
          <div class="tech-car-info-footer">
            <div class="status-indicator">
              <div class="status-dot online"></div>
              <span>运行中</span>
            </div>
            <div class="timestamp">${new Date().toLocaleTimeString()}</div>
          </div>
        </div>
      `;
      
      this.carWindow.setContent(content);
    },

    // 切换地图样式的方法
    changeMapStyle(style) {
      if (this.mapStyles[style]) {
        this.mapStyle = style;
        this.map.setMapStyle(this.mapStyles[style]);
      }
    },

    // 获取所有可用的地图样式
    getAvailableMapStyles() {
      return Object.keys(this.mapStyles);
    }
  },
  beforeDestroy() {
    // 清理定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
    
    // 清理地图实例
    if (this.map) {
      this.map.destroy();
    }
  }
}
</script>

<style scoped>
.tech-blue-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2a6c, #2a4b9b, #3a6cb0);
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 15px;
  background: rgba(0, 25, 50, 0.7);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.map-title {
  color: #4fc3f7;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}

.map-controls {
  display: flex;
  gap: 10px;
}

.style-btn {
  padding: 8px 15px;
  background: rgba(0, 50, 100, 0.6);
  color: #bbdefb;
  border: 1px solid #4fc3f7;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.style-btn:hover {
  background: rgba(33, 150, 243, 0.8);
  color: white;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.style-btn.active {
  background: #0277bd;
  color: white;
  box-shadow: 0 0 15px rgba(2, 119, 189, 0.8);
}

.tech-map {
  width: 100%;
  height: calc(100vh - 180px);
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border: 1px solid #4fc3f7;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.tech-map.map-hidden {
  opacity: 0;
}

/* 科技感loading样式 */
.tech-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 25, 47, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  border-radius: 10px;
}

.loading-content {
  text-align: center;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(2, 119, 189, 0.3);
  border-top: 4px solid #0277bd;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #4fc3f7;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.7);
}

/* 添加脉冲效果 */
.loading-spinner::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #4fc3f7;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}

/* 科技感车辆信息弹窗样式 */
.tech-car-info-container {
  background: linear-gradient(145deg, #0c1e3e, #1a3a6a);
  border-radius: 12px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(33, 150, 243, 0.4),
    inset 0 0 20px rgba(33, 150, 243, 0.3);
  border: 1px solid rgba(79, 195, 247, 0.6);
  overflow: hidden;
  min-width: 320px;
  transform-style: preserve-3d;
  position: relative;
}

.tech-car-info-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
}

.tech-car-info-header {
  background: linear-gradient(90deg, #0277bd, #0288d1);
  color: white;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.tech-car-info-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.tech-car-info-header:hover::after {
  left: 100%;
}

.header-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-text {
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.tech-car-info-body {
  padding: 22px;
  background: rgba(12, 30, 62, 0.9);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.info-item {
  background: linear-gradient(145deg, rgba(2, 119, 189, 0.2), rgba(2, 136, 209, 0.1));
  border-radius: 10px;
  padding: 14px;
  border: 1px solid rgba(79, 195, 247, 0.3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
}

.info-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(33, 150, 243, 0.5);
  border-color: rgba(79, 195, 247, 0.7);
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #4fc3f7;
  font-size: 13px;
  margin-bottom: 10px;
}

.info-value {
  color: #e3f2fd;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.6);
}

.speed-value {
  color: #4fc3f7;
  font-size: 20px;
}

.unit {
  font-size: 13px;
  color: #bbdefb;
}

.tech-progress-bar {
  margin-top: 18px;
}

.progress-label {
  color: #bbdefb;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-track {
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(79, 195, 247, 0.2);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0277bd, #4fc3f7);
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.8);
  transition: width 0.5s ease;
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: progressGlow 2s infinite;
}

@keyframes progressGlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.tech-car-info-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  background: rgba(0, 25, 50, 0.7);
  border-top: 1px solid rgba(79, 195, 247, 0.3);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #bbdefb;
  font-size: 15px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9e9e9e;
  box-shadow: 0 0 6px #9e9e9e;
}

.status-dot.online {
  background: #4caf50;
  box-shadow: 0 0 10px #4caf50;
}

.timestamp {
  color: #90caf9;
  font-size: 13px;
  font-weight: 500;
}

/* 检修人员信息窗口样式 */
.tech-worker-info-container {
  background: linear-gradient(145deg, #0c1e3e, #1a3a6a);
  border-radius: 12px;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(33, 150, 243, 0.4),
    inset 0 0 15px rgba(33, 150, 243, 0.3);
  border: 1px solid rgba(79, 195, 247, 0.5);
  overflow: hidden;
  min-width: 220px;
  transform-style: preserve-3d;
  position: relative;
}

.tech-worker-info-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
}

.tech-worker-info-header {
  background: linear-gradient(90deg, #0277bd, #0288d1);
  color: white;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.worker-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tech-worker-info-body {
  padding: 18px;
  background: rgba(12, 30, 62, 0.9);
}

.worker-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 15px;
  gap: 8px;
}

.worker-status.online {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.worker-status.offline {
  background: rgba(158, 158, 158, 0.15);
  color: #bdbdbd;
  border: 1px solid rgba(158, 158, 158, 0.3);
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.worker-details {
  display: grid;
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(2, 119, 189, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(79, 195, 247, 0.2);
}

.detail-label {
  color: #90caf9;
  font-size: 14px;
}

.detail-value {
  color: #e3f2fd;
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 0 6px rgba(79, 195, 247, 0.5);
}

/* 弹窗动画效果 */
.amap-info-content {
  background: transparent !important;
  padding: 0 !important;
  max-width: none !important;
  border: none !important;
  box-shadow: none !important;
}

.amap-info-sharp {
  transform: perspective(1000px) rotateX(5deg);
  transition: transform 0.3s ease;
  animation: popup 0.4s ease-out;
}

.amap-info-sharp:hover {
  transform: perspective(1000px) rotateX(0deg);
}

@keyframes popup {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .tech-car-info-container {
    min-width: 280px;
  }
}

/* 终点信息样式 */
.destination-info {
  background: linear-gradient(145deg, #0c1e3e, #1a3a6a);
  border-radius: 8px;
  padding: 10px 15px;
  color: #ff5252;
  font-weight: bold;
  border: 1px solid #ff5252;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
  text-align: center;
}
</style>